<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="infos" :current="current"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in infos" :key="index" @click="handleSwiperClick">
					<image :src="item" mode="aspectFit" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	import {
		info
	} from 'sass';

	export default {
		components: {},
		props: {
			// 定义接收父组件传递的infos数组，这里要求数组元素是包含url属性的对象
			infos: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: '#01c6c1',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				swiperDotIndex: 0,
				currentIndex: 0, // 用于记录当前展示图片的索引

			}
		},
		mounted() {
			// console.log(this.info)
			// console.log(this.infos);
		},
		methods: {
			change(e) {
				this.current = e.detail.current
				// 同步swiperDotIndex与current，确保指示器和轮播图显示一致
				this.swiperDotIndex = this.current;
				this.currentIndex = this.current;
			},
			clickItem(e) {
				this.swiperDotIndex = e
				this.current = e
				this.currentIndex = e
			},
			handleSwiperClick() {
				const that = this;
				uni.previewImage({
					urls: this.infos, // 直接使用infos数组作为图片路径数组
					current: this.infos[this.currentIndex], // 根据索引获取当前点击的图片路径
					indicator: "number"
				});
			}
		
		}
	}
</script>


<style lang="scss" scoped>
	.swiper-box {
		height: 300px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	.swiper-image {
		width: 100%;
		height: 500rpx;
	}
</style>